<!--
	Created by qiao on 2018/6/6.
-->
<template>
    <div class="payResult">
        <h1 class="title">Thank you Your order has been placed</h1>
        <div class="mainBox">
            <div class="content">
                <h2>An email confirmation has been sent to you.</h2>
                <h2>
                  <span>Payment Status:</span>
                  <!--<span>{{orderData.paymentStatus}}</span>-->
                  <span>Pending</span>
                </h2>
                <h2>
                    <span>Order Number:</span>
                    <span>{{orderNo}}</span>
                </h2>
                <h2 v-show="orderData.paidTime">
                  <span>Order Time:</span>
                  <span>{{timeChage(orderData.paidTime)}}</span>
                </h2>
              <h3 @click="goOrderDetail" style="cursor:pointer"><u>review or edit you order</u></h3>
            </div>
        </div>
      <div class="foot">
          <input type="button" value="Homepage"  @click="goShopping"/>
      </div>
    </div>
</template>

<script type="es6">
  import {mapMutations,mapActions} from 'vuex'
  import {getRequestDetail} from '../../api/requests';
    export default {
        data() {
            return {
              orderNo:"",   //订单号
              orderData:"",//订单数据
            }

        },
        watch: {},
        created() {
          this.orderNo = this.$route.params.id || sessionStorage['promotionOrderNo'] || '';   //获取订单号
          this.ordersDataFn(this.orderNo,(data)=>{//请求订单详情
            this.orderData = data;
          })
        },
        mounted() {
            document.title = "payResult";

        },
        methods: {
          ...mapActions([
            'BtnLoading'
          ]),
          goShopping(){
            this.$router.push({path:'/limited-deals'})
          },
          timeChage(time){
            if(!time) return;
            let newTime = '';
            if(time !== ''){
              let year = time.substring(0,4);
              let month = time.substring(5,7);
              let data = time.substring(8,10);
              let hours = time.substring(11,13);
              let minu = time.substring(14,16);
              let ampm = hours >= 12 ? 'pm' : 'am';
              newTime = month + "-" + data + '-'+ year + ' '+ hours +'-'+ minu + ampm
            }
            return newTime
          },
          ordersDataFn(orderNo,callBack){
            this.BtnLoading((timer, commit) => {
              getRequestDetail(orderNo).then((res) => {
                callBack(res);

                clearInterval(timer);
                commit('SET_ROUTE_LOADING', false);
              }).catch(err => {

                clearInterval(timer);
                commit('SET_ROUTE_LOADING', false);
              })
            })
          },
          goOrderDetail(){
            this.$router.push({ //跳到order详情
              path: `/my-order/promotion/${this.orderNo}`
            });
          }

        },
        components: {},
    }
</script>

<style scoped>
    .payResult{
        width: 100%;
    }
    .payResult .title{
        width: 100%;
        height: 110px;
        line-height: 110px;
        font-size: 25px;
    }
    .payResult .mainBox{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border:1px solid #a5a8ab;
        border-radius: 2px;
        padding:90px 0;
    }
    .payResult .mainBox .content{
        display: flex;
        flex-direction: column;
        width: 350px;
    }
    .payResult .mainBox .content h2{
        font-size: 20px;
    }
    .payResult .mainBox .content h2:nth-child(1){
        text-align: center;
    }
    .payResult .mainBox .content h2:nth-child(2),h2:nth-child(3),h2:nth-child(4){
        display: flex;
        justify-content: space-between;
        margin-top: 36px;
    }
    .payResult .mainBox .content h3{
        font-size: 20px;
        color:#18823a;
        margin-top: 36px;
        text-align: center;
    }
    .payResult .foot{
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 75px 0;
    }
    .payResult .foot input{
        width: 290px;
        height: 50px;
        color: white;
        font-size: 22px;
        background: #18823a;
    }
</style>
